<template>
  <div class="home">
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
      <swiper-slide v-for="item in bannerArray">
        <img :src="item.s_photos[0].path"
      /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>

    <div class="recommend">
      <p>精彩推荐</p>
      <ul class="ad-list">
        <li v-for="item in adList" :key="item.key">
          <img v-lazy="item.s_photos[0].path" alt="" />
        </li>
      </ul>
    </div>

    <Exhibition v-for="item in typeArray" :key="item.id" :classify="item" />
  </div>
</template>

<script>
//引入swiper组件
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// 引入swiper样式
import "swiper/css/swiper.css";
import { getBanner, getType } from "@/assets/request";
import Exhibition from "@/components/Exhibition.vue";
export default {
  name: "Home",
  title: "Navigation",
  data() {
    return {
      //配置swiper
      swiperOptions: {
        autoplay: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      //存放轮播图的数组
      bannerArray: [],
      typeArray: [],
      good: {},
      adList: [],
    };
  },
  components: {
    Swiper,
    SwiperSlide,
    Exhibition,
  },
  directives: {
    swiper: directive,
  },
  async mounted() {
    let resBanner = await getBanner();
    this.bannerArray = resBanner.data.result;
    this.adList = this.bannerArray;
    this.adList.length = 4;
    const resType = await getType();
    this.typeArray = resType.data.result;
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .swiper {
    width: 1200px;
    height: 520px;
    img {
      width: 100%;
      height: 100%;
    }
    --swiper-theme-color: #fff;
  }

  .recommend {
    width: 1200px;
    height: 100%;
    margin: 20px auto;
    p {
      width: 100%;
      height: 50px;
      font-size: 16px;
      color: #333;
    }
    .ad-list {
      display: flex;
      justify-content: space-between;
      width: 1200px;
      height: 100%;
      li {
        width: 280px;
        height: 140px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
